<template>
  <div>
    <jxTable :title="title" :columns="column" :dataList="courseList"
    @sendPage="getPage" :total="total">
      <template #createAt="{scope}">
            {{new Date(scope.createAt).toLocaleDateString()}}
      </template>
      <template #isState="{scope}">
          {{scope.isState==1?"草稿":(scope.isState=="2"?'上架':"下架")}}
      </template>
      <template #action="{scope}">
        <div>
              <el-link type="primary" @click="toEdit(scope)">编辑</el-link>
              <el-link type="danger">删除</el-link>
        </div>
      </template>
    </jxTable> 
  </div>
</template>

<script setup>
  import jxTable from '../../components/table/index.vue'
  import {getCourseListApi} from '../../api/course'
  import {ref,reactive} from 'vue'
  import {useRouter} from 'vue-router'
  let router=useRouter();
  let title=ref("课程列表");
  let courseList=ref([]) //课程列表数据
  let formState=reactive({
    searchText:"",
    CategoryOne:"",
    CategoryTwo:"",
    CategoryThree:"",
    pageStart:1
  })
  let total=ref(0)
  // 获取课程列表接口
  let getList=async ()=>{
    let res=await getCourseListApi(formState)
    console.log(res,"----------")
    courseList.value=res.data.list;
    total.value=res.data.count;
  }
  
  getList();
  let getPage=(val)=>{
    formState.pageStart=val;
      getList();
  }
  // 表头的数据
  let column=[{
        label:"课程名称",
        prop:"Cname"
      },
      {
        label:"课程代号",
         prop:"Cnumber"
      },
      {
        label:"在学人数",
        prop:"onlineUser"
      },
      {
        label:"编辑日期",
        slot:"createAt"
      },
      {
        label:"课程状态",
         slot:"isState"
      },
      {
        label:"操作",
        slot:"action"
      }
  ]
  // 跳转编辑课程页面并传递课程的ID,和课程的_id
  let toEdit=(row)=>{
      router.push({
        name:"courseadd",
        query:{
          ID:row.ID,
          _id:row._id,
          status:"edit"
        }
      })
  }
</script>
